<template>
  <div ref="dom" class="echarts" :style="{width: width, height:height}" />
</template>

<script>
  import echarts from 'echarts'
  import {
    on,
    off
  } from '@/utils/tools'
  export default {
    name: 'PEcharts',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      option: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        dom: null
      }
    },
    watch: {
      option(val) {
        if (val) {
          this.$nextTick(() => {
            this.dom.setOption(val)
            on(window, 'resize', this.resize)
          })
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
        if (this.option) {
          this.dom.setOption(this.option)
          on(window, 'resize', this.resize)
        }
      })
    },
    beforeDestroy() {
      off(window, 'resize', this.resize)
    },
    methods: {
      init() {
        this.dom = echarts.init(this.$refs.dom)
      },
      resize() {
        this.dom.resize()
      }
    }
  }
</script>

<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>